<!-- base.html -->
<!DOCTYPE html>
{% load staticfiles %}
<html>
<!-- 背景动画 -->
<canvas id="c_n9" width="1920px" height="990px" style="position: fixed; top: 0; left: 0; z-index: -1; opacity: 1;"></canvas>
<script src="../../static/message_board/js/particle.js"></script>
<head>
    <meta charset='utf-8'>
    <title>
        {% block title %} {% endblock %}
    </title>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"
            integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw="
            crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
</head>
<body style=" background-image: url({% static "message_board/image/bkg.jpg" %});background-repeat: repeat-x ;background-size: 1600px;background-attachment: fixed">

<!--小火箭-->
<style>
    #back-top {
        position: fixed;
        bottom: 10px;
        right: 5px;
        z-index: 99;
    }

    #back-top span {
        width: 50px;
        height: 64px;
        display: block;
        background: url({% static "message_board/image/rocket.png" %}) no-repeat center center;
    }

    #back-top a {
        outline: none
    }
</style>
<script type="text/javascript">
    $(function () {
        // hide #back-top first
        $("#back-top").hide();
        // fade in #back-top
        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
</div>


<div class='container-fluid'>
    {% include 'header.html' %}
    <div class='row' aria-setsize="" style="position:absolute;top:17%;width: 100%">
        <div class='col-md-3' style="position: absolute"><!--横向共12个格子-->
            <div class='panel panel-default'>
                <div class='panel-heading'>
                    <h3>
                        菜单
                    </h3>
                </div>
                <div class='panel-body'>
                    <div class='list-group'>
                        <a href='../../aid/seeActivity/' class='list-group-item'>查看活动</a>
                        <a href='../../aid/writeTrainActivity/' class='list-group-item'>发布培训活动</a>
                        <a href='../../aid/writeRecruitActivity/' class='list-group-item'>发布招募活动</a>
                        <a href='../../aid/myActivity/' class='list-group-item'>我的活动</a>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-sm-8 col-md-8' style="position: absolute;left: 25%">
            <div class='panel panel-default'>
                <div class='panel-heading'>
                    {% block headmessage %} {% endblock %}
                </div>
                <div class='panel-body'>
                    {% block content %} {% endblock %}
                </div>
                <div class='panel-footer'>
                    {% include 'footer.html' %}
                </div>
            </div>
        </div>
    </div>
</div>


</div>
</body>
</html>
